//out:../css/
//页头背景图
.breadcrumb-area {
    position: relative;
    width: 100%;

    .top-breadcrumb-area {
        width: 100%;
        height: 350px;
        background-size: contain;
        background-position: center center;

        h2 {
            position: relative;
            z-index: 10;
            margin-top: 100px;
            font-size: 36px;
            color: #ffffff;
            margin-bottom: 0;
            line-height: 1;
            text-transform: uppercase;
        }
    }

    .overlay {
        width: 100%;
        height: 350px;
        background-color:
            rgba(17, 17, 17, 0.3);
        position: absolute;
        top: 0px;
        z-index: 5;

    }

    //面包屑导航
    .breadcrumb {
        margin: 0;
        padding-top: 30px;
        padding-bottom: 50px;
        padding-left: 0;
        padding-right: 0;
        background-color: transparent;
    }

    .breadcrumb-item {
        font-size: 16px;
        color: #000000;
        text-transform: capitalize;

        a {
            text-transform: capitalize;
            font-size: 16px;
            color: #303030;
            text-decoration: none;
        }

        a:hover,
        a:focus {
            color: #70c745;
        }
    }

}

//帮助文档
.row {
    .leftNavbar{
        .list-group {
            position: sticky;
            top: 80px;
            div.list-group-item{
                button{
                    width: 100%;
                    line-height: 1.5;
                    display: flex;
                    justify-content: space-between;
                    position: relative;
                    align-items: center;
                    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
                    font-size: 1rem;
                    color: var(--bs-accordion-btn-color);
                    text-align: left;
                    background-color: var(--bs-accordion-btn-bg);
                    border: 0;
                    border-radius: 0;
                    overflow-anchor: none;
                    transition: var(--bs-accordion-transition);
                }
                div#collapseOne{
                    font-size: 14px;
                        a{
                            border: none;
                            background-color: transparent;
                        }
                }

            }
        }

    }

    div.mainDocument {
        padding: 0 50px;

        div.scrollspy-example {

            //首行缩进
            p {
                text-indent: 2em;
                line-height: 30px;
            }

            //段落间距
            h3 {
                font-weight: 600;
                margin-top: 3rem;
                margin-bottom: 3rem;
            }

            #list-item-1{
                h3 {
                    margin-top: 0rem;
                }
            }

            h5 {
                font-weight: 600;
                margin-bottom: 1.5rem;
                margin-top: 1.5rem;
            }

            //链接效果
            a {
                text-decoration: none;
            }
            a:hover {
                text-decoration: underline;
                text-decoration-thickness: 1.2px;
            }

            // 卫星源传感器
            #list-item-2{
                div{
                    position: relative;
                    img{
                        width: 650px;
                    }
                    a{
                        width: 650px;
                        height: 100%;
                        position:absolute;
                        top: 0;
                        left: 0;
                    }
                }
            }

            // 密钥申请
            #list-item-3{
                .row{
                    margin: 40px 0;
                    .col-1{
                        text-align: center;
                        font-size: 30px;
                    }
                    .col-11{
                        padding-left: 50px;
                        border-left: 1.5px solid rgba(0, 0, 0, 1);
                        p{
                            font-weight: 900;
                        }
                        div{
                            position: relative;
                            img{
                                width: 800px;
                            }
                            a{
                                width: 800px;
                                height: 100%;
                                position:absolute;
                                top: 0;
                                left: 0;
                            }
                        }
                    }
                }
            }

            //code区域
            div.code-area {
                margin-bottom: 20px;
                padding: 0 20px;
                border-radius: 0 0 10px 10px;
                overflow: auto;
            }

            div.code-display {
                margin-top: 20px;
                padding: 5px 40px;
                border-radius: 10px 10px 0 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            //code共有格式
            div.code-area,
            div.code-display {
                max-height: 400px;
                width: 90%;
                background-color: #000000;
                color: rgb(255, 255, 255);
                margin-left: auto;
                margin-right: auto;
                position: relative;

                span.badge {
                    background-color: #70c745;
                    color: white;
                }

                //code区域字体色
                span.code-note {
                    color: rgb(167, 167, 167);
                }
                span.code-string {
                    color: lightsalmon;
                }
                span.code-var {
                    color: rgb(157, 233, 252);
                }
                span.code-type {
                    color: rgb(108, 159, 214);
                }
                span.code-class{
                    color:#74dac1;
                }
                span.code-return{
                    color:rgb(195, 138, 224);
                }

                span.lang {
                    // position: absolute;
                    top: 10px;
                    left: 30px;
                    color: rgb(167, 167, 167);
                }

                button.code-copy {
                    // position: absolute;
                    top: 10px;
                    right: 30px;
                    background-color: transparent;
                    border-radius: 10%;
                    border: none;
                    transition: all 0.2s;

                    i {
                        color: rgb(167, 167, 167);
                        font-size: 20px;
                        transition: all 0.2s;
                    }
                }

                button.code-copy:hover i {
                    color: white;
                }

                button.code-copy:hover {
                    background-color: rgba(255, 255, 255, 0.3)
                }
            }
            // 文本内代码样式
            span.code-excode {
                color: rgb(71, 101, 130);
                font-size: 10.5pt;
                padding: 3px 6px;
                margin: 0 4px 0 5px;
                border-radius: 3px;
                font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
                background-color: rgb(241, 241, 241);
            }
            // 相关下载
            .relativeDown {
                a {
                    display: flex;
                    align-items: center;

                    i {
                        color: #303030;
                        font-size: 45px;
                    }
                }
            }

        }
    }
}

//表格
div.table-responsive {

    // margin:0px 150px;
    table {
        font-size: 14px;
        th:nth-child(1) {
            width: 20%;
            /* 第二列宽度为30% */
        }

        th:nth-child(2) {
            width: 15%;
            /* 第三列宽度为40% */
        }

        th:nth-child(3) {
            width: 12%;
            /* 第四列宽度为30% */
        }

        th:nth-child(4) {
            width: 53%;
            /* 第四列宽度为30% */
        }

        th:nth-child(3),
        td:nth-child(3),
        th:nth-child(2),
        td:nth-child(2) {
            text-align: center;
        }
    }
}

//滚动条轨道
div.code-area::-webkit-scrollbar {
    background-color: transparent;
    border-radius: 8px;
    width: 8px;
}

//滚动条滑块
div.code-area::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 8px;
    width: 8px;
}

div.code-area:hover::-webkit-scrollbar {
    background-color: #555;
}

div.code-area:hover::-webkit-scrollbar-thumb {
    background-color: #8b8b8b;
}

//弹窗
div.popArea {
    width: 200px;
    position: fixed;
    right: 10px;
    top: 80px;
    opacity: 1;
    transition: all 0.5s;
}

div.pop {
    width: 200px;
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 5px;
    background-color: #5cd122;
    color: #ffffff;
    font-size: 16px;
    opacity: 0.8;
    position: relative;
    right: 10px;
    transition: all 0.5s;

    div {

        display: flex;
        align-items: center;

        i {
            font-size: 25px
        }
    }
}

// 图片放大区域
.overlayArea {
    position: fixed;
    top: 0;
    left: 0;
    z-index:1031;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    .enlargeImg {
        max-width: 70%;
        max-height: 70%;
    }
    button{
        width: 110px;
        height: 90px;
        background-color: transparent;
        border: none;
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        z-index: 1032;
        color: rgba(255, 255, 255, 0.3);
        font-size: 50px;
    }
    .previous{
        left:1%;
    }
    .next{
        right: 1%;
    }
}
